/* @flow */
'use strict';

var React = require('react-native');

var {
	StyleSheet,
	View,
	Text,
	ListView,
	TouchableOpacity,
	ActionSheetIOS,
	AlertIOS,
	AppStateIOS
} = React;

var DataAry = new Array();
DataAry.push("ActionSheetIOS");
DataAry.push("AlertIOS");
DataAry.push("AppStateIOS");



var BUTTONS = [
	'Option 0',
	'Option 1',
	'Option 2',
	'Destruct',
	'Cancel',
];

var DESTRUCTIVE_INDEX = 3;
var CANCEL_INDEX = 4;

var OtherAPIView = React.createClass({

	getInitialState: function() {
		var ds = new ListView.DataSource({
			rowHasChanged: (r1, r2) => r1 !== r2
		});
		return {
			dataSource: ds.cloneWithRows(DataAry),
			clicked: 'none',
			currentAppState: AppStateIOS.currentState,
		};
	},

	componentDidMount: function() {
		AppStateIOS.addEventListener('change', this._handleAppStateChange);
	},
	componentWillUnmount: function() {
		AppStateIOS.removeEventListener('change', this._handleAppStateChange);
	},
	_handleAppStateChange: function(currentAppState) {
		this.showAlert("当前状态是" + currentAppState);
	},

	clickRow: function(item) {
		if (item === 'ActionSheetIOS') {
			this.showActionSheet(item);
		} else if (item === 'AlertIOS') {
			this.showAlert(item);
		} else if (item === 'AppStateIOS') {
			this.showAppStateAlert("AppStateIOS能告诉你应用当前是在前台还是在后台，并且能在状态变化的时候通知你App,StateIOS通常在处理推送通知的时候用来决定内容和正确的表现。。切换尝试一下吧");
		}
	},

	renderRowItem: function(item, rowID) {
		return (
			<TouchableOpacity onPress={()=>this.clickRow(item)}>
				<View style={styles.rowViewStyle}>
					<Text style={styles.rowTextStyle}>{item}</Text>
				</View>
			</TouchableOpacity>
		);
	},

	render: function() {
		return (
			<ListView
      			dataSource={this.state.dataSource}
      			renderRow={(item,rowID) => this.renderRowItem(item, rowID)}
    		/>
		);
	},

	showActionSheet: function(item) {
		ActionSheetIOS.showActionSheetWithOptions({
			options: BUTTONS,
			cancelButtonIndex: CANCEL_INDEX,
			destructiveButtonIndex: DESTRUCTIVE_INDEX,
		}, (buttonIndex) => {
			this.setState({
				clicked: BUTTONS[buttonIndex]
			});
		});
	},

	showAlert: function(item) {
		AlertIOS.alert(
			'提示',
			item, [{
				text: 'OK',
				onPress: () => console.log('Foo Pressed!')
			}, {
				text: 'NO',
				onPress: () => console.log('Bar Pressed!')
			}, ]
		)
	},
	showAppStateAlert: function(item) {
		AlertIOS.alert(
			'提示',
			item, [{
				text: 'OK',
				onPress: () => () => console.log('Foo Pressed!')
			}, {
				text: 'NO',
				onPress: () => console.log('Bar Pressed!')
			}, ]
		)
	}
});


var styles = StyleSheet.create({
	rowViewStyle: {
		alignItems: 'center',
		height: 40
	},
	rowTextStyle: {
		fontSize: 20
	}
});


module.exports = OtherAPIView;